<script setup lang="ts">
import {onMounted, reactive} from "vue";
import {applyMerchant} from "@/utils/request";
import {exeAnimat} from "@/utils";
onMounted(() => {
  exeAnimat()
})
const vueData=reactive({
  dialog: false,
  loading:false
})
const form=reactive({
  contact_name:'',
  contact_tel:'',
  seller_name:''
})
const rules={
  contact_name:[
    (value:string) => {
      if (value) return true
      return '请输入联系人'
    },
  ],
  contact_tel:[
    (value:string) => {
      if (value) return true
      return '请输入联系电话'
    },
  ],
  seller_name:[
    (value:string) => {
      if (value) return true
      return '请输入公司名/门店名'
    },
  ],
}
const submit=()=>{
  // applyMerchant()
  if (!form.contact_name) return;
  if (!form.contact_tel) return;
  if (!form.seller_name) return;
  vueData.loading=true
  applyMerchant(form).then(res=>{
    setTimeout(()=>{
      vueData.loading=false
      vueData.dialog=true

      form.contact_name=''
      form.contact_tel=''
      form.seller_name=''
    },1000)
  })
}
</script>

<template>
<div class="pt-60px">
  <div>
    <v-dialog v-model="vueData.dialog" width="auto">
      <v-alert
        type="success"
        title="提交成功"
        text="我们的运营专家会很快联系您"
      ></v-alert>
    </v-dialog>
  </div>
  <v-container class="!pt-120px !pb-200px flex items-end">
    <div class="flex-1 mr-70px">
      <v-img :height="520" class="left-in-2" src="@/assets/images/apply-card1.png"></v-img>
    </div>
    <div class="flex-1">
      <div class="btn-scale rounded-8px bg-hex-FFEFEB flex items-center px-16px h-40px mb-30px">
        <img src="@/assets/images/bell.png" class="w-12px h-14px mr-15px" alt="">
        <div class="text-hex-EA612F text-16px">请填写一下必要材料，我们的运营专家会很快联系您。</div>
      </div>
      <v-form @submit.prevent="submit">
        <v-text-field class="mb-30px right-in-1" :rules="rules.contact_name" v-model="form.contact_name" label="如何称呼您？" prepend-inner-icon="mdi-account" color="primary" placeholder="请输入您的名字" variant="outlined"></v-text-field>
        <v-text-field class="mb-30px right-in-2" :rules="rules.contact_tel" v-model="form.contact_tel" label="如何联系您？" prepend-inner-icon="mdi-cellphone" color="primary" placeholder="请输入您的手机号" variant="outlined"></v-text-field>
        <v-text-field class="mb-20px right-in-3" :rules="rules.seller_name" v-model="form.seller_name" label="您的公司名/门店名？" prepend-inner-icon="mdi-domain" color="primary" placeholder="请输入您的公司名/门店名" variant="outlined"></v-text-field>
        <div class="right-in-4">
          <v-btn
            color="primary"
            block
            type="submit"
            :loading="vueData.loading"
            height="50px"
            variant="flat">
            <span class="text-17px">立即提交</span>
          </v-btn>
        </div>
      </v-form>
    </div>
  </v-container>
</div>
</template>

<style scoped>

</style>
